import { FC, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
// 引入资源
import styles from './styles.module.scss'
import backGround from '@/assets/Login/login-bg.png'
import qrCode from '@/assets/qrcode.jpg'
import { UserOutlined, LockOutlined, QqOutlined } from '@ant-design/icons';
import { Input, Button, message } from 'antd';
import classNames from "classnames";



// 引入请求
import { postLogin } from '../../api/Login/index'

// 引入cookie
import cookie from 'react-cookies'

const Login: FC = () => {


    const [LoginWay, SetLoginWay] = useState<string>('account')
    const [account, setAccount] = useState<string>('xiaotuxian001')
    const [password, setPassword] = useState<string>('123456')
    const [messageApi, contextHolder] = message.useMessage();

    const Navigate = useNavigate()

    const Login = () => {
        const LoginForm = {
            account,
            password
        }

        postLogin(LoginForm).then((res) => {
            message.success('登录成功!', 1, () => {
                //设置cookie，第三个参数的意思是所有页面都能用这个cookie
                // 用户信息
                cookie.save('userInfo', res.result, { path: "/" })
                Navigate('/home', {
                    replace: true
                })
            })





        }).catch(() => {
            message.error('登录失败,请检查后重试!', 1, () => {

            })
        })

    }

    useEffect(() => {
        // Login()
        return () => {

        }
    }, [])

    return (
        <div className={styles.Login}>
            {contextHolder}
            <img src={backGround} alt="" />
            <div className={styles.box}>
                <div className={styles.loginWay}>
                    <span className={classNames({ [styles.active]: LoginWay === 'account' })} onClick={() => {
                        SetLoginWay('account')
                    }}>账户登录</span>
                    <span className={classNames({ [styles.active]: LoginWay === 'qrCode' })} onClick={() => {
                        SetLoginWay('qrCode')
                    }}>扫码登录</span>
                </div>
                {
                    LoginWay === 'account' && <div className={styles.accountContent}>
                        <div className={styles.form}>
                            <Input size="large" placeholder="请输入用户名" prefix={<UserOutlined />} className={styles.input} value={account} onChange={(e) => {
                                setAccount(e.target.value)
                            }} />
                            <Input size="large" type="password" placeholder="请输入密码" prefix={<LockOutlined />} className={styles.input} value={password} onChange={(e) => {
                                setPassword(e.target.value)
                            }} />
                            <Button type="primary" className={styles.button} onClick={() => { Login() }}>登录</Button>
                        </div>
                        <div className={styles.QQ}>

                            <span><QqOutlined style={{ fontSize: 25 }} />QQ登录</span>
                        </div>
                    </div>
                }
                {
                    LoginWay === 'qrCode' && <div className={styles.qrcodeContent}>
                        <img src={qrCode} alt="" />
                        <span>打开<a href="">小兔鲜App</a>扫码登录</span>
                    </div>
                }


            </div>

        </div>
    )
}

export default Login